<template>
        <div class="digital-flop-component">
                <DigitalItem
                        v-for="(item, index) in integerDigitalArray"
                        :key="getItemKey(index)"
                        :data="item"
                        :animation="animation"
                />
                <DigitalItem
                        v-for="(item, index) in decimalDigitalArray"
                        :key="index"
                        :data="item"
                        :isDecimalPlace="true"
                        :animation="animation"
                />

        </div>
</template>
    
<script setup lang='ts'>
import { ref, watch, } from 'vue';
import DigitalItem from './digitalItem.vue';

interface Props {
        value: number;
        minLength: number;
        maxLength: number;
        decimalPlaceNumber: number;
        isShowSeparator: boolean;
        animation: boolean;
        integerCardStyle?:any;
        decimalPlaceCardStyle?:any;
}

const props = withDefaults(defineProps<Props>(), {
        value: 0,
        minLength: 1,
        maxLength: 10,
        decimalPlaceNumber: 0,
        isShowSeparator: false,
        animation: true,
});

const integerDigitalArray = ref<string[]>([]);
const decimalDigitalArray = ref<string[]>([]);

watch(() => props.value, () => {
        initDigitalData(props.value);
}, { immediate: true  })

function initDigitalData(digitalValue: number) {
        let integerArray = [];
        if (props.decimalPlaceNumber > 0) {
                const value = digitalValue.toFixed(props.decimalPlaceNumber);
                const index = value.indexOf('.');
                decimalDigitalArray.value = value.slice(index + 1).split('');
                integerArray = value.substring(0, index).split('');
        } else {
                decimalDigitalArray.value = [];
                integerArray = digitalValue.toString().split('');
        }

        const addZero = (array: string[], minLength: number) => {
                const length = array.length;
                if (length < minLength) {
                        array.unshift('0');
                        addZero(array, minLength);
                }
        }
        if (props.minLength) {
                addZero(integerArray, props.minLength);
        }
        if (props.maxLength && integerArray.length > props.maxLength) {
                console.log(`output->`,'传入数字长度超过最大长度')
        }
        if (props.isShowSeparator) {
                integerArray = addSeparator(integerArray);
        }
        console.log(`output->integerArray`,integerArray)
        integerDigitalArray.value = integerArray;
}

const addSeparator = (array: string[]) => {
        const dataArray = array.reverse();
        const separatorArray = [];
        while(dataArray.length) {
                separatorArray.push(dataArray.splice(0, 3).reverse().join(''));
        }
        return separatorArray.join(',').split('').reverse();

}

const getItemKey = (index: number) => {
        return integerDigitalArray.value.length - index;
}

</script>
    
<style lang="scss" scoped>
    .digital-flop-component {
        display: flex;
        align-items: flex-end;
        flex-wrap: nowrap;
        .DigitalItem {
                margin-right: 5px;
        }
        .DigitalItem:last-child {
                margin-right: 0;
        }

  }

</style>